   function Swiper(el) {

       // this === swiper1/swiper2

       // 保存大家都需要使用的数据
       this.el = document.querySelector(el)
       //    console.log(this.el);
       this.pages = this.el.querySelectorAll('ul li')
       this.t = null
       this.num = 1
       // 启动插件
       this.init()
       // init可以是任何名词
   }
   Swiper.prototype.init = function () {
       // this === swiper1/swiper2

       // 功能
       //  自动切换轮播图
       this.autoplay()
       //  分页器移入
       this.pageOver()
       //  分页器移出  (注:会调用自动切换轮播图原型方法 体现越细)
       this.pageOut()
   }


   Swiper.prototype.pageOut = function () {
       //    遍历
       // 绑定移出事件
       // 事件处理函数中:重新调用autoplay()
       this.pages.forEach(item => { //item就是每个分页器 标签对象
           item.onmouseout = () => { // this = swiper1/swiper2
               this.autoplay()
           }
       })
   }

   Swiper.prototype.pageOver = function () {
       //    1.获取 当前 和模型所有分页器
       //    2.遍历
       this.pages.forEach((item, i) => { //item就是一个个分页器 li标签对象
           item.onmouseover = () => {
               clearInterval(this.t)

               this.num = i + 1

               this.el.querySelector('img').src = `../tools/imgs/img${this.num}.jpg`

               this.tbPage(this.num)
           }
       })
       //    3.绑定鼠标移入时间(1-清除定时器,2-重置num,3-换成当前图,4-同步分页器)
   }
   Swiper.prototype.autoplay = function () {
       // 1. 定时器(每隔2秒将图片名num++)
       // 2. 判断num大于6 就重置为1
       // 3. 切换当前盒模型里面的图片
       this.t = setInterval(() => { //this 父function中的this
           this.num++

           if (this.num > 6) this.num = 1
           this.el.querySelector('img').src = `../tools/imgs/img${this.num}.jpg`
           //    分页器同步
           this.tbPage(this.num)
       }, 2000)
   }


   Swiper.prototype.tbPage = function (num) {
       //    1.获取当前选中的分页器页面
       this.el.querySelector('ul li.active').className = ''
       //    2.给当前的分页器加样式(规则:num-1等于当前的分页器索引)
       this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
   }
   let swiper1 = new Swiper('.box1')
   let swiper2 = new Swiper('.box2')